<h1>人员登记系统</h1>
<div class="people_list">
    <ul>
        <li>姓名：<input type="text" [(ngModel)]="peopleInfo.username"/></li>
        <li>性别：
            <input type="radio" value="1" name="sex" [(ngModel)]="peopleInfo.sex" id="1"/><label for="1">男</label>
            <input type="radio" value="2" name="sex" [(ngModel)]="peopleInfo.sex" id="2"/><label for="2">女</label>
        </li>
        <li>
            城市：
            <select name="city" id="city" [(ngModel)]="peopleInfo.city">
                <option [value]="item" *ngFor="let item of peopleInfo.cityList" >{{item}}</option>
            </select>
        </li>
        <li>
            爱好：
            <span *ngFor="let item of peopleInfo.hobby;let key=index">
                <!-- 这里写 id 和 for 属性的值是为了，点击字也可以达到点击框框的效果 -->
                <input type="checkbox" [id]="'check'+key" [(ngModel)]="item.checked" /><label [for]="'check'+key">{{item.title}}</label>
                &nbsp;
            </span>
        </li>
        <li>
            备注：
            <textarea [(ngModel)]="peopleInfo.mark"></textarea>
        </li>
    </ul>
    <button  (click)="doSubmit()" class="btn btn-primary">获取表单的内容</button>
    <pre>
        {{peopleInfo|json}}
    </pre>
</div>

<input type="button" value="hallo" class="btn btn-danger"/>
